<template>
  <div>
    <el-card style="width: 100%">
      <div class="btn">
        <el-button type="success" icon="el-icon-edit" @click="dialogVisible = true">添加菜单</el-button>
      </div>

      <!-- //表格 -->
      <div>
        <el-table
          :data="tableData"
          style="width: 100%; margin: 20px"
          row-key="id"
          :default-expand-all="true"
          toggleRowExpansion="expanded"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="title" label="标题" width="280">
          </el-table-column>
          <el-table-column prop="code" label="权限点代码" width="850">
          </el-table-column>

          <el-table-column label="操作" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="primary" icon="el-icon-edit"  @click="dialogVisible = true" circle></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                @click="delMenu(row)"
                circle
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 添加弹层 -->
    <el-dialog title="创建菜单" :visible.sync="dialogVisible">
      <el-form>
        <el-form-item label="权限组名称">
          <el-radio-group>
            <el-radio>菜单</el-radio>
            <el-radio>权限点</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="权限组名称">
          <treeselect
          style="width:60%"
            :options="dataList"
            placeholder="请选择上级菜单"

          />
        </el-form-item>

        <div>
          <el-form-item label="权限代码" prop="code">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="权限代码" prop="title">
            <el-input></el-input>
          </el-form-item>
        </div>
      </el-form>

      <div slot="footer">
        <el-button>取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, remove } from '@/api/base/menus.js'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  data () {
    return {
      tableData: [],
      dataList: [],
      dialogVisible: false
    }
  },
  components: {
    Treeselect
  },

  created () {
    this.getMenuList()
  },

  methods: {
    // 获取菜单列表
    async getMenuList () {
      const { data } = await list()
      // console.log(data)
      this.tableData = data
      this.screenData(this.tableData)
      this.dataList = this.screenData(this.tableData)
    },
    // 数据转化为树形结构
    screenData (data) {
      data.forEach((item, index) => {
        // console.log(item)
        item.children = []
        if (item.childs && item.childs.length > 0) {
          item.children = item.childs
          // console.log(item.children)
          item.childs.forEach((v, i) => {
            v.children = []
            if (v.points && v.points.length > 0) {
              v.children = v.points
              // console.log(v.points)
            }
          })
        }
      })
    },

    // 删除菜单
    async delMenu (data) {
      console.log(data)
      await this.$confirm('确定永久删除该用户？')
      await remove(data)
      this.$message.success('删除用户成功')
      this.getMenuList()
    }
  }
}
</script>

<style lang="less">
.el-card {
  margin: 20px;
  .el-button--danger {
    color: #f56c6c;
    background: #fef0f0;
    border-color: #fbc4c4;
  }
  .el-button--primary {
    color: #409eff;
    background: #ecf5ff;
    border-color: #b3d8ff;
  }
}
.btn {
  display: flex;
  justify-content: end;
}
.el-table tr {
  height: 60px;
}
.el-table [class*="el-table__row--level"] .el-table__expand-icon {
  display: none !important ;
}
.el-dialog {
  .el-form {
    text-align: left;
  }
  .el-form-item {
    display: flex;

    width: 80% !important;

  }
  .el-input {
    width: 180%;
  }
}
</style>
